<template>
  <div class="form-single">
    <!-- 锚点定位 -->
    <div class="anchor">
      <div class="anchor-item" @click="handleClickAnchor('contracts-info')">
        合同基本信息
      </div>
      <div class="anchor-item" @click="handleClickAnchor('approver-title')">
        审批流程
      </div>
      <div
        class="anchor-item"
        v-if="isArchive || detailData.verifyStatus === 10"
        @click="handleClickAnchor('contracts-Archive')"
      >
        合同归档信息
      </div>
      <div
        class="anchor-item"
        v-if="BusinessOpportunityDo"
        @click="handleClickAnchor('dynamic-title')"
      >
        关联商机信息
      </div>
      <div
        class="anchor-item"
        v-if="ClueDo"
        @click="handleClickAnchor('clue-info')"
      >
        关联线索信息
      </div>
    </div>
    <div style="position: relative; padding: 20px">
      <router-header title="合同详情"></router-header>
      <div
        class="form-single-fragment"
        style="position: relative; margin-right: 120px"
      >
        <el-form :model="detailData" size="mini" label-position="right">
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title">{{
              detailData.clueName
            }}</el-col>
            <el-col :span="6">
              <el-form-item label="创建日期：">{{
                detailData.createTime
              }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同录入部门：">{{
                detailData.deptName
              }}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同录入人：">{{
                detailData.createUserName
              }}</el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="附件：">
                <Upload v-model="detailData.accessory" fielState="2" readonly></Upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">{{
                detailData.remarks
              }}</el-form-item>
            </el-col> -->
            <el-col :span="24" class="line"></el-col>
            <div ref="contracts-info"></div>
            <el-col :span="24" class="clue-title">合同基本信息</el-col>
            <div>
              <el-col :span="12">
                <el-form-item label="企业名称：">{{
                  detailData.enterpriseName
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业联系人：">
                  <span>{{ detailData.contactPerson }}</span>
                  <span style="margin-left: 10px">{{
                    detailData.telephone
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="业务类型：">{{
                  detailData.businessNameList &&
                  detailData.businessNameList.length > 0
                    ? detailData.businessNameList.toString()
                    : ""
                }}</el-form-item>
              </el-col>
              <el-col :span="12" v-if="detailData.parentName">
                <el-form-item label="所在地区：">{{
                  detailData.parentName.join(" ")
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预计合同金额：">
                  {{detailData.contractAmount}} {{detailData.units}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预计成交日期：">{{
                  detailData.signingDate
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否需要会审：">
                  {{ detailData.reviewStatus == 0 ? "否" : "是" }}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="附件：">
                  <Upload
                    v-model="detailData.accessory"
                    fielState="2"
                    readonly
                    :id="detailData.id"
                  ></Upload>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：">{{
                  detailData.remarks
                }}</el-form-item>
              </el-col>
            </div>
            <el-col :span="24" class="line"></el-col>
            <el-col :span="24" class="clue-title"
              ><div ref="approver-title"></div>
              审批流程</el-col
            >
            <el-col :span="24">
              <el-form-item label="审批人：">
                <Approver
                  v-if="detailData.approver"
                  :readonly="true"
                  :approverList="detailData.approver"
                ></Approver>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="抄送人：">
                <Approver
                  v-if="detailData.csrArr"
                  :isCc="true"
                  :readonly="true"
                  :approverList="detailData.csrArr"
                ></Approver>
              </el-form-item>
            </el-col>
            <div v-if="isArchive || detailData.verifyStatus === 10">
              <el-col :span="24" class="line"></el-col>
              <!-- <el-row  style="padding-left:10px;"> -->
                <el-col :span="20" class="clue-title"><div ref="contracts-Archive"></div>
                合同归档信息
              </el-col>

              <el-col :span="4" class="clue-btn">
                <el-button
                  v-if="
                    detailData.createUser === getUserInfo.userId &&
                    (detailData.verifyStatus === 7 ||
                      detailData.verifyStatus === 9)
                  "
                  type="primary"
                  @click="contractArchive"
                  >合同归档</el-button
                >
              </el-col>
              <!-- </el-row> -->
              <div v-if="contractArchiveData" style="padding-left:10px;">
                <el-form-item label="合同金额：">
                  {{ contractArchiveData.money }} {{ contractArchiveData.units }}
                </el-form-item>
                <el-form-item label="合同签订完成日期：">
                  {{ contractArchiveData.goodTime }}
                </el-form-item>
                <el-form-item label="合同扫描件：">
                  <Upload
                    v-model="contractArchiveData.accessoryList"
                    fielState="10"
                    :id="contractArchiveData.id"
                    readonly
                  ></Upload>
                </el-form-item>
                <el-form-item label="归档进度：">
                  <Approver
                    v-if="contractArchiveData.archiveApprovaers"
                    :readonly="true"
                    :approverList="contractArchiveData.archiveApprovaers"
                  ></Approver>
                </el-form-item>
              </div>
            </div>
            <!-- <el-col :span="24" class="clue-title">合同会审信息</el-col>
            <div>
              <el-col :span="12">
                <el-form-item label="发起时间：">{{
                  detailData.enterpriseName
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="通过时间：">{{
                  detailData.businessTypeName
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="附件：">
                  <Enclosure :list="detailData.accessory"></Enclosure>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注：">{{
                  detailData.remarks
                }}</el-form-item>
              </el-col>
            </div> -->
            <el-col
              :span="24"
              class="line"
              v-if="BusinessOpportunityDo"
            ></el-col>
            <!-- 商机信息 -->
            <el-col :span="24" v-if="BusinessOpportunityDo">
              <div ref="dynamic-title"></div>
              <el-col :span="24" class="clue-title">关联商机信息</el-col>
              <el-col :span="24" class="clue-title">{{
                BusinessOpportunityDo.oppoName
              }}</el-col>
              <el-col :span="6">
                <el-form-item label="创建日期：">{{
                  BusinessOpportunityDo.createTime
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入部门：">{{
                  BusinessOpportunityDo.deptName
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人：">{{
                  BusinessOpportunityDo.showName
                }}</el-form-item>
              </el-col>
              <el-col
                :span="24"
                style="font-size: 16px; margin-bottom: 20px"
                v-if="dynamicList.length > 0"
                >商机动态</el-col
              >
              <el-col :span="24">
                <div class="dynamic" v-loading="loading">
                  <div
                    class="dynamic-item"
                    v-for="(item, index) in dynamicList"
                    :key="index"
                  >
                    <div style="flex-shrink: 0">
                      <img
                        class="avatar"
                        src="@/assets/img/default-header.png"
                        alt=""
                      />
                      <div class="name">
                        {{ item.userName }}，{{ item.userDepartment }}
                      </div>
                    </div>
                    <div style="margin-left: 20px">
                      <div class="dynamic-content">
                        {{ item.dynamicContent }}
                      </div>
                      <div class="dynamic-time">
                        发布于{{ item.releaseTime }}
                      </div>
                    </div>
                  </div>
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.current"
                    :page-size="queryParams.size"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, prev, pager, next, sizes"
                    :total="dynamicTotal"
                    v-if="dynamicTotal > 0"
                  ></el-pagination>
                </div>
              </el-col>
            </el-col>
            <el-col :span="24" class="line" v-if="ClueDo"></el-col>
            <!-- 线索信息 -->
            <el-col :span="24" v-if="ClueDo">
              <div ref="clue-info"></div>
              <el-col :span="24" class="clue-title">关联线索信息</el-col>
              <el-col :span="24" class="clue-title">{{
                ClueDo.clueName
              }}</el-col>
              <el-col :span="6">
                <el-form-item label="创建日期：">{{
                  ClueDo.createTime
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入部门：">{{
                  ClueDo.deptName
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人：">{{
                  ClueDo.createUserName
                }}</el-form-item>
              </el-col>
              <el-col :span="24" style="font-size: 16px; margin-bottom: 20px"
                >线索基本信息</el-col
              >
              <el-col :span="6">
                <el-form-item label="企业名称：">{{
                  ClueDo.customerName
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业联系人："
                  >{{ ClueDo.contacts }} {{ ClueDo.telephone }}</el-form-item
                >
              </el-col>
              <el-col :span="6">
                <el-form-item label="业务类型：">{{
                  ClueDo.businessTypeName
                }}</el-form-item>
              </el-col>
              <el-col :span="6" v-if="ClueDo.parentName">
                <el-form-item label="所在地区：">{{
                  ClueDo.parentName.join("")
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="线索来源：">{{
                  ClueDo.clueSource
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业属性：">{{
                  ClueDo.productIntention
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="线索概况：">{{
                  ClueDo.clueContent
                }}</el-form-item>
              </el-col>
              <el-col
                :span="24"
                style="font-size: 16px; margin-bottom: 20px"
                v-if="clueDynamicList.length > 0"
                >线索动态</el-col
              >
              <el-col :span="24" v-if="clueDynamicList.length > 0">
                <div class="dynamic" v-loading="loading">
                  <div
                    class="dynamic-item"
                    v-for="(item, index) in clueDynamicList"
                    :key="index"
                  >
                    <div style="flex-shrink: 0">
                      <img
                        class="avatar"
                        src="@/assets/img/default-header.png"
                        alt=""
                      />
                      <div class="name">
                        {{ item.userName }}，{{ item.deptNmae }}
                      </div>
                    </div>
                    <div style="margin-left: 20px">
                      <div class="dynamic-content">
                        {{ item.dynamicsContent }}
                      </div>
                      <div class="dynamic-time">
                        发布于{{ item.createTime }}
                      </div>
                    </div>
                  </div>
                  <el-pagination
                    background
                    @size-change="handleSizeChangeClue"
                    @current-change="handleCurrentChangeClue"
                    :current-page="clueQueryParams.current"
                    :page-size="clueQueryParams.size"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, prev, pager, next, sizes"
                    :total="clueDynamicTotal"
                    v-if="clueDynamicTotal > 0"
                  ></el-pagination>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Contracts } from '@/api/projectAdministration.js';
import { BusinessOpportunities, Cluemanagement } from '@/api/commercial.js';
// import Enclosure from './Contractsinfo/Enclosure.vue';
import ContractArchive from './components/contractArchive.vue';
import Approver from './components/approver.vue';
import { getType } from '@/utils';
export default {
  name: 'ContractsDetail',
  data () {
    return {
      detailData: { parentName: [] },
      contractArchiveData: {}, // 合同归档数据
      contractId: this.$route.query.contractId,
      BusinessOpportunityDo: null,
      ClueDo: null,
      loading: false,
      queryParams: {
        current: 1,
        size: 10
      },
      clueQueryParams: {
        current: 1,
        size: 10
      },
      dynamicList: [],
      clueDynamicList: [],
      dynamicTotal: 0,
      clueDynamicTotal: 0
    };
  },
  computed: {
    // 是否为归档
    // 合同审核状态(枚举1=会审审批中 、2=会审审批通过、3=会审审批驳回、4=盖章审批中、5=盖章审批驳回、6=审批完成、7=待归档、8=归档中、9=归档驳回、10=已完成)
    isArchive () {
      return this.detailData.verifyStatus === 7 ||
        this.detailData.verifyStatus === 8 ||
        this.detailData.verifyStatus === 9
    }
  },
  components: {
    // Enclosure,
    Approver
  },
  created () {
    this.loadContractsDetail();
  },
  methods: {
    // 锚点
    handleClickAnchor (name) {
      setTimeout(() => {
        this.$refs[name].scrollIntoView({ behavior: 'smooth' });
      }, 0);
    },
    // 合同归档
    contractArchive () {
      console.log('合同归档', this.detailData);
      this.$dialog.show('合同归档', ContractArchive, {
        area: ['800px', '70vh']
      }, {
        detail: this.detailData
      }).then(res => {
        console.log('确定之后', res);
      }).catch(e => {
      });
    },
    loadContractsDetail () {
      Contracts.detail(this, {
        id: this.contractId
      }).then((res) => {
        let data = res.data;
        data.contractVo.csrArr = data.contractVo.ccpeopleVos?.map(v => {
          v.showName = v.userName;
          return v;
        });
        this.detailData = data.contractVo;
        console.log(this.detailData, 454)
        this.contractArchiveData = data.contractArchive;
        this.BusinessOpportunityDo = data.BusinessOpportunityDo || null;
        this.ClueDo = data.ClueDo || null;
        let accessory = this.detailData?.accessory;
        this.detailData.accessory = getType(accessory).isString ? JSON.parse(accessory) : accessory;
        console.log(this.detailData.accessory);
        this.getList();
        this.getClueDynamicList()
      });
    },
    handleCurrentChange (val) {
      this.queryParams.current = val;
      this.getList();
    },
    handleSizeChange (val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChangeClue (val) {
      this.clueQueryParams.current = val;
      this.getClueDynamicList();
    },
    handleSizeChangeClue (val) {
      this.clueQueryParams.size = val;
      this.getClueDynamicList();
    },
    getList () {
      this.loading = true;
      BusinessOpportunities.listDynamic(this, {
        ...this.queryParams,
        oppoId: this.BusinessOpportunityDo?.id
      })
        .then((res) => {
          this.dynamicList = res.data.records;
          this.dynamicTotal = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getClueDynamicList () {
      this.loading = true;
      Cluemanagement.dynamicList(this, {
        ...this.clueQueryParams,
        clueId: this.ClueDo?.id
      }).then(res => {
        this.clueDynamicList = res.data.records
        this.clueDynamicTotal = res.data.total
        this.loading = false
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.clue-title {
  font-size: 20px;
  margin-bottom: 10px;
}
.form-single {
  padding: 0 !important;
}
.anchor {
  position: absolute;
  right: 15px;
  top: 70px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
  .anchor-item {
    padding: 8px 15px;
    background-color: #fff;
    // border-bottom: 1px solid #d7d7d7;
    cursor: pointer;
    &:last-child {
      border: none;
    }
    &:hover {
      background: #d7d7d7;
    }
  }
}
.line {
  width: 100%;
  height: 2px;
  background: rgba(242, 242, 242, 1);
  margin-bottom: 15px;
}
.dynamic {
  padding: 20px;
  border-radius: 8px;
  background: rgba(242, 242, 242, 0.3);
  .dynamic-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 40%;
      margin: 0 auto;
      display: block;
      margin-bottom: 6px;
    }
    .dynamic-content {
      min-height: 40px;
      margin-bottom: 6px;
    }
    .dynamic-time {
      color: #d7d7d7;
    }
  }
  .dynamic-release {
    margin-top: 50px;
  }
  .release-btn {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
<style>
.form-single [class*="el-col-"] {
  float:none !important;
}
</style>
